<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 计时事件 - setInterval() 方法-如何停止执行?</title>
</head>

<body>
    <!-- clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。 -->
    <!-- 要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量： -->
    <!-- myVar=setInterval("javascript function",milliseconds); -->
    <!-- 然后你可以使用 clearInterval() 方法来停止执行。 -->

    <p>页面上显示时钟：</p>
    <p id="demo"></p>
    <button onclick="myStopFunction()">停止</button>
    <script>
        var myVar = setInterval(function () { myTimer() }, 1000);
        function myTimer() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
        }
        function myStopFunction() {
            clearInterval(myVar);
        }
    </script>
</body>

</html>